<template>
  <view class="box" :style="theme">
    <view class="top">
      <view class="top_img">
        <image class="top_imgs" :src="imgHost+'/ic_success@2x.png'"></image>
      </view>
      <text class="top_desc">验券成功</text>
    </view>
    <view class="index_back">
      <text @click="jump('/pages/index/index')">回到首页</text>
      <text @click="jump('/pages/venue/entranceAndExit')">进出场</text>
    </view>
    <view class="mp_title" v-if="ordList.length>0">可用门票：</view>
    <view class="mp" v-for="(item, index) in ordList" :key="index">
      <text>{{item.objName}}</text>
      <text v-if="item.type==1">适用项目：{{item.useProject}}</text>
      <text>适用时间：{{ item.useTime }}</text>
      <view class="mp_line"></view>
      <view class="mp_img" @click="jumpCode(item.code)">
        <image :src="imgHost+'/yanquan_ic_saoma@2x.png'"></image>
        <test>扫码入场</test>
      </view>
    </view>

    <!-- <view class="box_footer">
      <view class="box_footer_agree">
        <view class="checkboxBoxD" @click="isTy">
          <view class="checkboxBox" :class="isActive?'on':''">
            <u-icon v-if="isActive" name="checkmark-circle-fill" size="44rpx"></u-icon>
          </view>
        </view>
        <view>充值即视为同意<text class="ztColor" @click="open">《充值协议》</text></view>
      </view>
      <view class="footBtn mt20" @click="$noMultipleClicks(submit)">确认充值</view>
    </view> -->
    <u-popup :show="agreement" @close="showxy" mode="center" round="20rpx">
      <view class="agreement">
        <view class="agreement_bt">温馨提示</view>
        <view class="agreement_cnt">
          请先阅读并同意<text @click="open">《充值协议》</text>
        </view>
        <view class="agreement_btns flex">
          <view @click="showxy">我再想想</view>
          <view class="agreement_qrBtn" @click="qrBtn">同意</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data () {
    return {
      noClick: true,
      agreement: false,
      coverImgUrl: 'XXXXXXXXX',
      isActive: false,
      money: [], //会员卡列表
      id: '', //会员卡id
      vipId: '', //会员id
      policyInfo: {},
      xy: '',
      price: '',
      orderId: '04202411271646574897940',
      ordList: [],
    }
  },
  onLoad (options) {
    console.log(options, '553332')
    this.orderId = options.orderId
    this.getOrdList()
  },
  onShow () {
    // this.getYx()
    // this.getMemberInformation()

  },
  methods: {
    jumpIndex () {
      this.jump('/pages/index/index')
    },

    jumpCode (code) {
      this.jump('/pages/order/code/jumpCode?code=', code)
    },
    jump (url, params, a) {
      this.$app.jump(url, params, a);
    },
    showxy () {
      this.agreement = !this.agreement
    },
    getOrdList () {
      console.log(this.orderId, 'orderId')
      this.$app.ajax({
        data: {
          param: {
            // orderId: this.orderId
            orderId: '03202412021648287423781'
          }
        },
        api: this.$api.orderListXz()
      }).then((res) => {
        if (res.errorCode === '000000') {
          console.log(res.recordList, '打印信息1')
          this.ordList = res.recordList
        }
      }).catch(() => { })
    },
    getMemberInformation () {
      this.$app.ajax({
        data: {
          param: {}
        },
        api: this.$api.memberInformation()
      }).then((res) => {
        if (res.errorCode === '000000') {
          //   this.$store.commit('saveUserInfo', res.record);
        }
      }).catch(() => { })
    },
    isTy (e) {
      this.isActive = !this.isActive
    },
    open () {
      this.jump('/pages/home/meal?type=15&code=AGREEMENT_RECHARGE&title=', '充值协议')
    },
    qrBtn () {
      this.isActive = true
      this.agreement = false
      this.submit()
    },
    // 确认充值
    submit () {
      if (!this.isActive) {
        return this.agreement = true
      }
      if (!this.id) {
        this.$app.showToast('请先选择充值金额')
        return false
      }
      let that = this
      this.$app.ajax({
        data: {
          userId: this.userInfo.id,
          param: {
            money: this.id == '自定义金额' ? this.price : this.id,
            memberId: this.userInfo.id,
            venueId: this.venueId
          }
        },
        api: this.$api.memberRecharge()
      }).then((res) => {
        if (res.errorCode == '000000') {
          let orderId = res.record
          if (res.record) {
            this.$app.ajax({
              data: {
                userId: this.userInfo.id,
                param: {
                  memberId: this.userInfo.id,
                  orderId,
                  integralUse: '0',
                  payMethod: '03'
                }
              },
              api: this.$api.getPrice()
            }).then((resb) => {
              if (resb.errorCode === '000000') {
                let policyId = resb.record.policyId
                this.$app.ajax({
                  data: {
                    param: {
                      orderId: orderId,
                      payMethod: '03',
                      integralUse: '0',
                      policyId
                    }
                  },
                  api: this.$api.payment()
                }).then((resc) => {
                  if (resc.errorCode === '000000') {
                    let data = resc.record
                    // #ifdef MP-WEIXIN
                    uni.getProvider({
                      service: 'payment',
                      success: function (res) {
                        uni.requestPayment({
                          provider: 'wxpay', // 服务提提供商
                          timeStamp: data
                            .timeStamp,
                          nonceStr: data
                            .nonceStr,
                          package: data
                            .packageStr,
                          signType: 'MD5',
                          paySign: data.sign,
                          success: function () {
                            // 支付成功回调
                            that.$app
                              .showToast(
                                '支付成功')
                            setTimeout(
                              () => {
                                that.jump(
                                  '/pages/home/index',
                                  '',
                                  1
                                )
                              }, 2000
                            )
                            // 支付成功通知。。。
                          },
                          fail: function (errb) {

                          }
                        });
                      }
                    });
                    // #endif
                    // #ifdef H5
                    WeixinJSBridge.invoke('getBrandWCPayRequest', {
                      appId: that.$store.state
                        .wxId, //公众号名称，由商户传入
                      timeStamp: data
                        .timeStamp,
                      nonceStr: data
                        .nonceStr,
                      package: data
                        .packageStr,
                      signType: 'MD5',
                      paySign: data.sign,
                      paySign: data.sign,
                    }, function (res) {
                      if (res.err_msg ==
                        'get_brand_wcpay_request:ok') {
                        // 支付成功回调
                        that.$app
                          .showToast(
                            '支付成功')
                        setTimeout(
                          () => {
                            that.jump(
                              '/pages/home/index',
                              '', 1)
                          }, 2000
                        )
                      } else if (res.err_msg ==
                        'get_brand_wcpay_request:cancel') {
                        uni.showToast({
                          title: '支付取消',
                          icon: 'none'
                        })
                      }
                    }, function (err) {
                      console.log('err', err)
                    })
                    // #endif

                  } else {
                    this.$app.showToast(resc.errorMsg || resc.msg)
                  }
                }).catch(() => { })
              } else {
                if (resb.errorCode == '70003') {
                  setTimeout(() => {
                    that.jump('/pages/index/index', '', 1)
                  }, 2000)
                }
                this.$app.showToast(resb.errorMsg || resb.msg)
              }
            }).catch(() => { })
          }
        }
      }).catch(() => { })
    },
    // 选择金额
    clickMoney (e) {
      this.id = e.name
      this.price = ''
      this.getPolicyInfo()
    },
    getPolicyInfo () {
      let money = this.id
      if (this.id === '自定义金额') {
        money = this.price
      }
      if (!money) {
        return false
      }
      this.$app.ajax({
        data: {
          param: {
            cardTypeId: this.userInfo.cardTypeId,
            money,
            orderType: '01'
          }
        },
        api: this.$api.getPolicyInfo()
      }).then((res) => {
        if (res.errorCode === '000000') {
          this.policyInfo = res.record || {}
        }
      }).catch(() => { })
    },

  },
}
</script>
<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.mp_title {
  font-weight: 600;
  font-size: 32rpx;
  color: #222222;
  margin-top: 60rpx;
  margin-bottom: 30rpx;
}

.mp {
  padding: 24rpx 30rpx;
  background: #f7f7f7;
  display: flex;
  flex-direction: column;
  margin-top: 10rpx;

  .mp_line {
    border: 1px dashed #cccccc;
    margin-top: 32rpx;
    margin-bottom: 24rpx;
  }

  text:nth-child(1) {
    font-weight: 600;
    font-size: 34rpx;
    color: #222222;
    margin-top: 6rpx;
  }

  text:nth-child(2) {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
    margin: 24rpx 0;
  }

  text:nth-child(3) {
    font-weight: 400;
    font-size: 26rpx;
    color: #666666;
  }

  .mp_img {
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 44rpx;
      height: 44rpx;
      margin-right: 10rpx;
    }
  }
}

.box {
  padding: 30rpx;
  box-sizing: border-box;
}

.index_back {
  margin: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;

  text:nth-child(1) {
    border-radius: 50rpx;
    border: 1rpx solid #999999;
    font-weight: 400;
    font-size: 30rpx;
    color: #666666;
    width: 260rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    display: block;
  }

  text:nth-child(2) {
    border-radius: 50rpx;
    border: 1rpx solid #00ba92;
    font-weight: 400;
    font-size: 30rpx;
    color: #00ba92;
    width: 260rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    display: block;
  }
}

.top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 60rpx;
}

.top_img {
  width: 180rpx;
  height: 180rpx;
}

.top_imgs {
  width: 100%;
  height: 100%;
}

.top_desc {
  font-weight: 600;
  font-size: 36rpx;
  color: #222222;
  margin-top: 40rpx;
}

.box .boxImg {
  width: 100%;
  height: 334rpx;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
}

.box_image_title_left {
  display: flex;
  align-items: center;
}

.box_box_vip {
  position: absolute;
  right: 0;
  bottom: 0;
}

.box_box {
  width: 100%;
  height: 100%;
  padding: 40rpx;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.box_image_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box_image_title_left_img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background: #ffffff;
  overflow: hidden;
}

.box_image_title_left_img image {
  width: 100%;
  height: 100%;
}

.box_image_title_left_name {
  margin-left: 32rpx;
}

.box_image_title_left_name text {
  font-size: 36rpx;
  font-weight: 500;
  color: $yellow;
}

.box_image_title_right {
  padding: 7rpx 16rpx;
  background: $yellow;
  border-radius: 8rpx;
}

.box_image_title_right text {
  font-size: 22rpx;
  font-weight: 400;
  color: #5a1900;
}

.box_image_ye {
  display: flex;
  flex-direction: column;

  view {
    font-size: 26rpx;
    font-weight: 400;
    color: $yellow;

    text {
      font-size: 48rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      margin-right: 8rpx;
      color: $yellow;
    }
  }
}

.box_czje {
  display: flex;
  flex-direction: column;
  margin-top: 48rpx;
}

.box_czje_title {
  font-size: 32rpx;
  font-weight: 600;
  color: #222222;
}

.box_czje_content {
  display: flex;
  margin-top: 32rpx;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box_czje_content_items {
  width: calc(100% / 3.3);
}

.box_czje_content_item {
  width: calc(100% / 3.3);
  padding: 48rpx 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-radius: 16rpx;
  background: $bjColor;
  border: 2rpx solid #eeeeee;
  margin-bottom: 26rpx;
  overflow: hidden;
  position: relative;

  image {
    width: 56rpx;
    height: 56rpx;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  text {
    font-size: 40rpx;
    font-weight: 500;
    color: #666666;
  }

  .bj {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: $color;
    z-index: 0;
    display: none;
  }

  &.active {
    border-radius: 16rpx;
    border: 2rpx solid $color;

    .bj {
      display: block;
      opacity: 0.2;
    }

    text {
      color: #333;
    }
  }
}

.zdy {
  font-size: 26rpx !important;
}

.box_czje_input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 98rpx;
  padding: 20rpx;
  box-sizing: border-box;
  background: $bjColor;
  border-radius: 16rpx;
  border: 2rpx solid $color;
}

.box_czje_input_z {
  width: 30rpx;
  font-size: 28rpx;
  font-weight: 400;
  color: #222222;
  margin-left: 15rpx;
}

.weui-input {
  flex: 1 !important;
}

.box_x {
  height: 230rpx;
}

.box_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  padding: 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.box_footer_agree {
  display: flex;
  align-items: center;
}

.box_footer_agree text {
  font-size: 26rpx;
  margin-left: 5rpx;
}

.box_footer_btn {
  height: 88rpx;
  background: $color;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
}

.box_footer_btn text {
  font-size: 30rpx;
  font-weight: 500;
  color: #ffffff;
}
</style>